package com.bluexmicro.ota2.ui.custom

import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.ColumnScope
import androidx.compose.foundation.layout.IntrinsicSize
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.fillMaxHeight
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.width
import androidx.compose.foundation.lazy.LazyListScope
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material3.Divider
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp

fun LazyListScope.stepTitle(index: Int, title: String, ready: Boolean) = item {

    val color =
        if (ready)
            MaterialTheme.colorScheme.primary
        else
            MaterialTheme.colorScheme.primary.copy(0.2f)
    Row(
        verticalAlignment = Alignment.CenterVertically,
        modifier = Modifier.padding(vertical = 16.dp)
    ) {

        Box(
            modifier = Modifier
                .size(32.dp)
                .background(color, RoundedCornerShape(16.dp)),
            contentAlignment = Alignment.Center
        ) {
            Text(text = "$index", color = MaterialTheme.colorScheme.onPrimary)
        }

        Text(
            text = title,
            style = MaterialTheme.typography.titleMedium,
            color = MaterialTheme.colorScheme.onBackground,
            modifier = Modifier.padding(horizontal = 16.dp)
        )
    }

}

fun LazyListScope.stepContent(content: @Composable ColumnScope.() -> Unit) = item {
    StepContent(content)
}


@Composable
fun StepContent(content: @Composable ColumnScope.() -> Unit) {
    Row(
        modifier = Modifier
            .height(IntrinsicSize.Min)
            .padding(end = 16.dp)
            .fillMaxWidth()
    ) {

        Divider(
            modifier = Modifier
                .padding(start = 15.dp, end = 31.dp)
                .fillMaxHeight()
                .width(2.dp),
            color = MaterialTheme.colorScheme.onBackground.copy(0.1f)
        )

        Column(modifier = Modifier.fillMaxWidth()) {
            content()
        }
    }
}